<template>
  <div class=''>
      <!-- 分页按钮 -->
      <div class="page hand-style no-select" v-if="pageNo < pages" @click="handlePage">
          加载更多
      </div>
      <div class="tips" v-else>
          <div class="divider"></div>
          <div class="content">没有更多内容了</div>
          <div class="divider"></div>
      </div>
  </div>
</template>
<script setup>

const props = defineProps({
    pageNo: {
        type: Number,
        default: 0
    },
    pages: {
        type: Number,
        default: 0
    },
    changePage: {
      type: Function,
      default: () => {}
    }
})

// 声明对外暴露changePage的emit提交方法
const emit = defineEmits(['changePage'])
// handlePage事件
const handlePage = () => {
    emit('changePage', props.pageNo + 1)
}


</script>
<style scoped>
.page {
    text-align: center;
    background-color: white;
    width: 120px;
    height: 30px;
    line-height: 30px;
    border-radius: 50px;
    margin: 0 auto;
    margin-top: 20px;
    position: relative;
    white-space: nowrap;
    border: 1px solid #e4e7ed;
    transition: all .3s;
    color: rgba(0, 0, 0, .65);

    &:hover {
        background-color: #f5f7fa
    }

    &:active {
        transform: scale(0.7);
    }
}
.tips {
    text-align: center;
    color: #909399;
    display: flex;
    align-items: center;
    margin-top: 10px;

    .divider {
        display: inline-block;
        width: 100%;
        background-color: #e4e7ed;
        height: 1px;
    }

    .content {
        display: inline-block;
        width: 300px;
        font-size: 14px;
    }
}
</style>